<script setup lang="ts">
  // 移除全局导航栏，改为路由级别配置
  import LoginModal from '@/components/LoginModal.vue';
  import GlobalPaymentSuccessModal from '@/components/GlobalPaymentSuccessModal.vue';
  import { useRoute } from 'vue-router';
  import { computed, onMounted, watch, ref } from 'vue';

  // 获取路由实例
  const route = useRoute();

  const isHiddenLoginModal = ref<boolean>(false); //不显示登录弹框页面

  watch(
    () => route.path,
    (newPath, oldPath) => {
      isHiddenLoginModal.value = ['/privacy', '/terms'].includes(newPath);
    }
  );
</script>

<template>
  <div class="app">
    <main class="main-content">
      <router-view />
    </main>

    <!-- 全局登录弹窗 -->
    <LoginModal v-if="!isHiddenLoginModal" />

    <!-- 全局支付成功弹窗 -->
    <GlobalPaymentSuccessModal />
  </div>
</template>
<style lang="scss">
  @use 'sass:color';
  @use '@/styles/variables' as *;

  .app {
    min-height: 100vh;
    background: $primary-bg-color;
  }

  .main-content {
    min-height: 100vh;
  }

  // 滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: $secondary-bg-color;
  }

  ::-webkit-scrollbar-thumb {
    background: $card-bg-color;
    border-radius: 4px;

    &:hover {
      background: color.adjust($card-bg-color, $lightness: 10%);
    }
  }

  // 选择文本样式
  ::selection {
    background-color: rgba($primary-color, 0.3);
    color: $primary-text-color;
  }
</style>
